<template>
	<view class="key-container" @click="closeChage" v-show="showMask">
		<uni-transition :modeClass="['slide-bottom']" :show="show" :styles="{ height: '100vh' }" :duration="duration">
			<view class="key-content" @click.stop>
				<slot></slot>
				<view class="key-box block flex">
					<view class="key-left">
						<view class="key-top flex flex-wrap">
							<view class="btn-box" v-for="(item, index) in numArr" :key="index">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown(item)">{{ item }}</button>
							</view>
						</view>
						<view class="key-bottom">
							<view class="btn-zero">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown('0')">0</button>
							</view>
							<view class="btn-point">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="keydown('.')">.</button>
							</view>
						</view>
					</view>
					<view class="key-right">
						<view class="del">
							<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="del">
								<text class="zm iconbackspace text-xl"></text>
							</button>
						</view>
						<view class="confirm">
							<button hover-class="active" :style="[confirmStyle]" class="cu-btn" @click.stop="confirm">
								<text class="confirm-text">{{ confirmText }}</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
/**
 * 付款组件
 * @property {Number} duration - 弹出动画时长，默认为300
 * @event {Function} input - 数字改变触发，参数为数字
 * @event {Function} confirm - 付款时触发，参数为数字
 * @event {Function} hide - 关闭键盘触发，参数为空
 */

import uniTransition from './animation.vue';
export default {
	components: {
		uniTransition
	},
	props: {
		value: {
			type: String, //传入的值 vue2
			default: ''
		},
		modelValue: {
			type: String, //传入的值 vue3
			default: ''
		},
		duration: {
			type: Number, //弹出动画时常
			default: 300
		},

		max: {
			type: Number, //最大交易金额
			default: 100000
		},
		confirmText: {
			type: String, //确认按钮的文本
			default: '确认'
		},
		overlayClose: {
			type: Boolean, //是否在点击遮罩层后关闭
			default: true
		},
		confirmStyle: {
			type: Object, //确认按钮的样式
			default: () => {
				return {
					backgroundColor: '#2f6549'
				};
			}
		}
	},
	// 兼容vue3需声明emits注册事件
	emits: ['hide', 'confirm', 'input', 'update:modelValue'],
	data() {
		return {
			show: false, //显示键盘
			showMask: false, //遮罩层
			numArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9'] //键盘
		};
	},

	computed: {
		// v-model的实现
		content: {
			// （vue2:接收value vue3接收modelValue）
			get: function (el) {
				return this.value || this.modelValue;
			},
			// （vue2派发input vue3派发update:modelValue）
			set: function (val) {
				this.$emit('input', val);
				this.$emit('update:modelValue', val);
			}
		}
	},
	methods: {
		// 关闭
		close() {
			this.show = false;
			setTimeout(() => {
				this.showMask = false;
			}, this.duration);
		},
		// 打开
		open() {
			this.show = true;
			this.showMask = true;
		},
		// 删除
		del() {
			if (this.content.length) {
				this.content = this.content.slice(0, this.content.length - 1);
			}
		},
		// 输入
		keydown(e) {
			let strLen = this.content.length;
			// 最大支付金额的限制
			if (this.content >= this.max) {
				wx.showToast({
					title: `支付金额不能大于${this.max}`,
					icon: 'none',
					duration: 1500
				});
				return;
			}
			switch (e) {
				// 如果第一位是.做补零
				case '.':
					if (this.content.indexOf('.') === -1) {
						this.content.length < 1 ? (this.content = '0.') : (this.content += '.');
					}
					break;

				default:
					//输入的为0直接展示
					if (this.content === '0' && e !== '.') {
						this.content = e;
					} else {
						let spotIndex = this.content.indexOf('.'); //小数点的位置
						// 截取掉第一个0
						if (this.content[0] === '0' && this.content[1] !== '.') {
							this.content = this.content.substr(1);
						}
						//小数点后只保留两位
						if (spotIndex === -1 || this.content.length - spotIndex !== 3) {
							this.content += e;
						}
					}
					break;
			}
		},
		// 遮罩层 关闭
		closeChage() {
			if (this.overlayClose) {
				this.$emit('hide');
				this.close();
			}
		},
		// 确认按钮
		confirm() {
			this.$emit('confirm', this.content);
			this.closeChage();
		}
	}
};
</script>

<style lang="scss" scoped>
@font-face {
	font-family: 'zm'; /* project id 2442084 */
	src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot');
	src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix') format('embedded-opentype'),
		url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2') format('woff2'), url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff') format('woff'),
		url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf') format('truetype'), url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm') format('svg');
}

.zm {
	font-family: 'zm' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.iconbackspace:before {
	content: '\ef11';
}

.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap: wrap;
}
.cu-btn {
	position: relative;
	border: 0rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 30rpx;
	font-size: 28rpx;
	height: 64rpx;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	margin-left: initial;
	transform: translate(0rpx, 0rpx);
	margin-right: initial;
}

.cu-btn::after {
	display: none;
}
.text-xl {
	font-size: 36rpx;
	font-weight: bold;
	font-family: 'microsoft-yahei';
}
.text-black {
	color: #333;
}
.active {
	background-color: #ddd !important;
	transform: translate(2rpx, 2rpx);
}
.key-container {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	.key-content {
		position: absolute;
		bottom: 0;
		width: 100vw;
		background-color: #f7f7f7;
	}
}
.key-box {
	width: 100%;
	box-sizing: border-box;
	padding: 10rpx 10rpx 0;
	.key-left {
		width: 75%;
	}
	.key-right {
		width: 25%;
		display: flex;
		flex-direction: column;
	}
	.key-bottom {
		width: 100%;
		display: flex;
	}
}
.del {
	width: 100%;
}
.btn-box {
	width: 33.33%;
	padding: 0 10rpx 10rpx 0;
	box-sizing: border-box;
}
.btn-zero {
	width: 66.66%;
	padding: 0 10rpx 10rpx 0;
	box-sizing: border-box;
}
.btn-point {
	width: 33.33%;
	padding: 0 10rpx 10rpx 0;
	box-sizing: border-box;
}
.key-right {
	flex-shrink: 0;
}
.key-btn {
	background-color: #fff;
	width: 100%;
	height: 90rpx;
}

.confirm {
	width: 100%;
	flex: 1;
	padding: 10rpx 0 10rpx 0;
	box-sizing: border-box;
	button {
		width: 100%;
		height: 100%;
		.confirm-text {
			color: #fff;
			display: block;
			font-size: 32rpx;
		}
	}
}
</style>
